<template>
    <div class="list">
        <div class="title">
            <span @click="handleClick(index)" :style="{textDecoration:currentIndex==index?'underline':'',color:currentIndex==index?'yellow':'white'}" v-for="(item,index) in title" :key="index">{{item}}</span>
        </div>
        <div class="goods" v-for="(item,index) in goods" :key="index">
            <div class="imgBox">
                <img :src="item.pic" alt="">
            </div>
            <div class="text">
                <div class="name">{{item.name}}</div>
                <div class="box">
                    <div class="price">
                        <span>爆团涨价</span>
                        <span>￥{{item.price}}</span>
                        <span>￥{{item.del}}</span>
                    </div>
                    <div class="btn">
                        <button @click="yiqiang(item,index)">{{item.yq?'马上抢':'已抢'}} </button>
                        <span>已售{{item.count}}份</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var pic = "https://img0.baidu.com/it/u=308813076,2811235090&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=409";
export default {
    data(){
        return{
            currentIndex:'',
            title:['正在抢购','上新预告'],
            goods:[
                {pic,name:'买1送1明星皇堡|用心火烤 肉质紧实 鲜嫩多汁 爆爆团',price:25,del:50,count:9029,yq:true},
                {pic,name:'华莱士|聚划算单人套餐|进店必选',price:12.12,del:31.2,count:173,yq:true},
                {pic,name:'白老大小米果仁酥220g',price:20,del:40,count:291,yq:true},
            ],
        }
    },
    methods:{
        handleClick(index){
            this.currentIndex=index;
        },
        yiqiang(item,index){
            item.yq=false;
        }
    }
}
</script>

<style lang="scss" scoped>
    .title{
        background: orangered;
        opacity: 0.7;
        font-size: 18px;
    }
    .title span{
        display: inline-block;
        margin: 10px 30px;
        color: white;
    }
    .goods{
        display: flex;
        margin: 10px;
        background: #f5f5f5;
        border-radius: 20px;
    }
    .imgBox{
        height: 120px;
    }
    img{
        margin: 10px;
        height: 100px;
    }
    .text{
        flex: 1;
    }
    .text .name{
        padding:0 10px;
        font-weight: bold;
        margin: 10px 0 5px 0;
    }
    .box{
        display: flex;
    }
    .box span{
        display: block;
    }
    .box .price{
        flex: 1;
    }
    .box .price span:nth-child(1){
        font-size: 14px;
        color: orangered;
    }
    .box .price span:nth-child(2){
        font-size: 18px;
        color: orangered;
    }
    .box .price span:nth-child(3){
        font-size: 14px;
        text-decoration: line-through;
        margin-bottom: 10px;
    }
    .box .btn{
        flex: 1;
    }
    .box .btn button{
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 10px;
        border: none;
        font-size: 18px;
        color: white;
        background: orange;
        margin: 6px 0;
    }
    .box .btn span{
        color: orangered;
        font-size: 14px;
    }
    
</style>